<template>
    <view class="selected-item" :class="children2 ? '' : 'children2'">
        <view class="selected-item-data" :class="{
            'disable': data.children?.length
        }">
            <view v-if="data.children?.length">
                {{ data.name }}
            </view>
            <uv-button v-else :plain="selected ? false : true" :custom-style="miniButton" @click="handleNodeClick"
                :color="selected ? '#748ee2' : '#999999'" :text="data.name">
            </uv-button>
        </view>
        <view class="selected-item" v-for="(item, k) in data.children || []" :key="k" :class="children ? '' : 'children'">
            <Identifylabelitem :data="item" :_selected="_selected" @handleNodeClick="e => $emit('handleNodeClick', e)">
            </Identifylabelitem>
        </view>
    </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { miniButton } from '@/util/style';
import Identifylabelitem from './identifylabelitem.vue';
const p = defineProps<{ data: Eps.identifylabelEntity, _selected: Eps.identifylabelEntity[] }>()
const e = defineEmits(['handleNodeClick'])

function handleNodeClick() {
    if (!p.data.children?.length) {
        e('handleNodeClick', p.data)
    }
}
const selected = computed(() => {
    return !!p._selected.find(c => c.id == p.data.id)
})

const children = computed(() => {
    return p.data.children?.filter((c: any) => !!c.children?.length).length
})
const children2 = computed(() => {
    return p.data.children?.filter((c: any) => !!c.children?.filter((c: any) => !!c.children?.length).length).length
})
</script>

<style scoped lang="scss">
.selected-item {
    padding-left: 24rpx;
    display: flex;
    flex-wrap: wrap;
    min-height: 40rpx;
}

.selected-item-active {
    color: #FF746F;
}

.disable {
    color: #000;
    flex: 0 0 auto;
    width: 100%;
    min-width: 65vw;
    font-weight: 600;
    height: 60rpx;
    line-height: 60rpx;
}

.children2 {
    display: flex !important;
    flex-wrap: wrap;
}

.children {
    margin-bottom: 12rpx;
}
</style>